<template>
  <div id="app">
    <Drawer>
      <ViewBox>
        <vueHeader></vueHeader>
        <router-view></router-view>
        <vueFooter></vueFooter>
      </ViewBox>
    </Drawer>
  </div>
</template>

<script>
//lib
import Group from 'vux/src/components/Group'
import Cell from 'vux/src/components/Cell'
import Drawer from 'vux/src/components/Drawer'
import ViewBox from 'vux/src/components/View-box'
import XHeader from 'vux/src/components/x-header'

//layout
import vueHeader from '@/components/Layout/Header'
import vueFooter from '@/components/Layout/Footer'

export default {
  data () {
    return {
      
    }
  },
  components: {
    Drawer,
    ViewBox,
    XHeader,
    Group,
    Cell,
    vueFooter,
    vueHeader
  }
}
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/tap.less';

  body {
    background-color: #fbf9fe;
  }
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  #app {
    height: 100%
  }
</style>
